在 Day 18 | React入門：React Router 路由控制（上） 和 Day 19 | React入門：React Router 路由控制（下）
的文章中，我們看到路由在專案中可以怎麼應用，而這篇文章主要聚焦在 React Router v6 與前一版本的差異。
Switch、Route、Redirect、exact 等屬性，寫法較冗長exact 被移除，v6 會自動自動比對「最精確」的路由Redirect 被 <Navigate /> 取代，更直覺Route 自動傳 match、history、location
useParams、useNavigate、useLocation，符合 hooks 的精神，讓寫法更一致<Routes> 中宣告子路由 <Route>，就像 React JSX 的巢狀結構一樣，一眼就能看出父子關係| v5（舊版） | v6 / v7 （新版） | |
|---|---|---|
| Router 寫法 | <Switch> 包住 routes |
<Routes> 包住 routes |
| Route 指定元件 | <Route path="/about" component={About} /> |
<Route path="/about" element={<About />} /> |
| 預設比對 | <Route exact path="/"> 才能精確比對 |
exact 被移除，預設就是精確比對 |
| 巢狀路由 | 子元件內再寫 <Route> |
在 <Routes> 中直接寫巢狀 <Route> |
| 取得路由參數 | props.match.params.id |
const { id } = useParams(); |
| 導頁 | history.push('/home') |
navigate('/home'); |
| 重新導向 Redirect | <Redirect to="/home" /> |
<Navigate to="/home" /> |
新專案建議使用最新版本 (v6/v7)，因為語法更簡單，巢狀路由更直覺。
舊專案如果已經使用 v5，升級時要更注意改動。
iThome鐵人賽
看影片追技術